<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件
        $(function () {
            $("#btn").on("click",function () {
                //创建p添加到div中
                $("#dv").append($("<p>这是一个p</p>"));
                //为div中的p标签绑定事件
                /*
                * on方法： 两个参数:1事件的名字,2事件处理函数
                * on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素--p,3事件处理函数
                * on是父级元素调用,目的:为子级元素去绑定事件
                *
                * */
                /*$("#dv").on("click","p",function () {
                    alert("我被点了");
                });*/
                $("#dv p").on("click",function () {
                    alert("我被点了");
                });
            });
        });

    </script>
    <script>

        /*
        *
        * 绑定事件:
        * bind:
        * 绑定多个事件
        * 参数:{"事件的类型":事件处理函数,....}
        * delegate
        * 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
        * on
        * 参数:父级元素.on("事件类型","子级元素",事件处理函数);
        *
        *
        * */

    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>